<template>
	<div class="goods">
		<div class="menu-wrapper" ref="menu">
			<ul style="padding-start:0">
				<li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="SelectMenu(index,$event)">
					<span class="text">
						<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<div class="foods-wrapper" ref="foods">
			<ul style="padding-start:0">
				<li v-for="item in goods" class="food-list-hook">
					<h1 class="title">{{item.name}}</h1>
					<ul style="padding-start:0">
						<li v-for="food in item.foods" class="food-item">
							<div class="icon">
								<img :src="food.icon" width="57px" height="57px" />
							</div>
							<div class="content">
								<h2 class="name">{{food.name}}</h2>
								<p class="desc">{{food.description}}</p>
								<div class="extra">
									<span>月售{{food.sellCount}}份</span>
									<span>好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartcontrol-wrapper">
								<cartcontrol :food="food"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shopcart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice" :select-foods="selectFoods" ref="shopcart">
		</shopcart>
	</div>
</template>

<script>
	import BSscroll from 'better-scroll';
	import shopcart from '../components/shopcart.vue';
	import cartcontrol from '../components/cartcontrol.vue';
	const ERR_OK = 0;
	export default {
		props: {
			seller: {
				type: Object
			}
		},
		data() {
			return {
				goods: [],
				listHeight: [],
				scrollY: 0
			};
		},
		created(){
			this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
			this.$http.get('/api/goods').then((response) => {
				response = response.body;
				if (response.errno === ERR_OK){
					this.goods = response.data;
					// 在这个函数中调用以防内容还未加载完就执行，获取不到元素的高度导致无法滑动
					this.$nextTick(() => {
						this._initScroll();
						this._calculateHeight();
					});
				}
			});
		},
		methods: {
			_initScroll () {
				this.menuScroll = new BSscroll(this.$refs.menu, {
					click: true
				});
				this.foodsScroll = new BSscroll(this.$refs.foods, {
					click: true,
					probeType: 3
				});
				this.foodsScroll.on('scroll', (pos) => {
					this.scrollY = Math.abs(Math.round(pos.y));
				});
			},
			_calculateHeight (){
				var foodList = document.getElementsByClassName('food-list-hook');
				var height = 0;
				this.listHeight.push(height);
				for (var i = 0; i < foodList.length; i++) {
					let item = foodList[i];
					height += item.clientHeight;
					this.listHeight.push(height);
				}
			},
			SelectMenu (index, event){
				if (!event._constructed){
					return;
				}
				var foodList = document.getElementsByClassName('food-list-hook');
				var el = foodList[index];
				this.foodsScroll.scrollToElement(el, 300);
			},
			_drop(target){
               this.$refs.shopcart.drop(target);
			},
			'cart.add'(target) {
				console.log('add');
				this._drop(target);
			}
		},
		computed: {
			currentIndex(){
				for (var i = 0; i < this.listHeight.length; i++){
					var height1 = this.listHeight[i];
					// console.log(height1);
					// console.log(height2);
					var height2 = this.listHeight[i + 1];
					if ((this.scrollY >= height1 && this.scrollY < height2) || !height2){
						return i;
					}
				}
				return 0;
			},
			selectFoods() {
				let foods = [];
				this.goods.forEach(good => {
                    good.foods.forEach((food) => {
                      if (food.count){
						  foods.push(food);
					  }
					});
				});
				return foods;
			}
		},
		components: {
			shopcart,
			cartcontrol
		}
	};
</script>

<style type="text/css">

	ul{
		list-style: none;
	}
	.goods{
		display: flex;
		position: absolute;
		top:174px;
		bottom: 46px;
		width: 100%;
		overflow: hidden;
	}

	.goods .menu-wrapper{
		flex: 0 0 80px;
		width: 80px;/*为了安卓浏览器兼容性*/
		background: #f3f5f7;
		/*overflow-y: auto;*/
	}

	.goods .menu-wrapper .current{
		position: relative;
		margin-top: -1px;
		z-index: 10;
		background: #fff;
		font-weight: 700;
	}

	.goods .menu-wrapper .current .text{
		border: none;
	}

	.goods .foods-wrapper{
		flex: 1;
		background: #fff;
		/*overflow-y: auto;*/
	}

	.menu-wrapper .menu-item{
		display: table;
		height: 54px;
		width: 56px;
		line-height: 14px;
		padding:  0 12px;
	}

	.menu-wrapper .menu-item .icon{
		display: inline-block;
		vertical-align: top;
		width: 12px;
		height: 12px;
		margin-right: 2px;
		background-size: 12px 12px;
		background-repeat: no-repeat;
	}


	.menu-item.decrease{
		background-image: url('../assets/decrease_3@2x.png');
	}

	.menu-item .discount{
		background-image: url('../assets/discount_3@2x.png');
	}

	.menu-item .special{
		background-image: url('../assets/special_3@2x.png');
	}

	.menu-item .invoice{
		background-image: url('../assets/invoice_3@2x.png');
	}

	.menu-item .guarantee{
		background-image: url('../assets/guarantee_3@2x.png');
	}

	.menu-wrapper .menu-item .text{
		display: table-cell;
		width: 56px;
		vertical-align: middle;
		font-size: 12px;
		border-bottom: 1px solid #fff;
	}

	.foods-wrapper .title{
		padding-left: 14px;
		height: 26px;
		line-height: 26px;
		border-left: 2px solid #d9dde1;
		font-size: 12px;
		color:rgb(147,153,158);
		background: #f3f5f7;
	}

	.food-item{
		display: flex;
		margin:18px;
		padding-bottom: 18px;
		border-bottom: 1px solid #f0f0f0;
	}

	.food-item:last-child{
		display: flex;
		margin:18px;
		margin-bottom: 0;
	}

	.food-item .icon{
		flex:  0 0 57px;
		margin-right: 10px;
	}

	.food-item .content{
		flex: 1;
	}

	.content .name{
		font-size: 14px;
		margin: 2px 0 8px 0;
		height: 14px;
		line-height: 14px;
		color:rgb(7,17,27);
	}

	.content .desc,.extra{		
		line-height: 10px;
		font-size: 10px;		
		color: rgb(147,153,159)
	}

	.content .desc{
		margin-bottom: 8px;
		line-height: 12px;
	}

	.content .extra{
		height: 10px;
	}

	.content .price{
		font-weight: 700;
		line-height: 24px;
	}

	.price .now{
		margin-right: 8px;
		font-size: 14px;
		color: rgb(240,20,20);
	}

	.price .old{
		text-decoration: line-through;
		font-size: 10px;
		color: rgb(147,153,159);
	}
    
	.content{
		position: relative;
	}
	.content .cartcontrol-wrapper{
		position: absolute;
		right: 0;
		bottom: 12px;
	}
</style>
